<template>
  <div style="height: 535px; width: 100%" class="flex-row-center-center">
    <div class="flex-row-center-center" style="width: 41.08%">
      <div style="width: 100%">
        <div class="add-data-title flex-row-center-center">
          检测点数据新增
        </div>
        <div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">
              库区编号
            </div>
            <Input class="add-data-unit-value" v-model="kqId"  @on-blur="updateJcdId" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">
              井组编号
            </div>
            <Input class="add-data-unit-value" v-model="jzId"  @on-blur="updateJcdId" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">检测点编号</div>
            <Input class="add-data-unit-value" v-model="jcdId" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">检测点名称</div>
            <Input class="add-data-unit-value" v-model="jcdName" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">最新数值</div>
            <Input class="add-data-unit-value" v-model="updateValue" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">检测点坐标</div>
            <Input class="add-data-unit-value" v-model="jcdPoint" />
          </div>
          
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title"></div>
            <Button class="add-data-button" @click="addData">新增</Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: 1,
      kqId: "",
      jzId: "",
      jcdId: "",
      jcdName: "",
      updateValue: "",
      jcdPoint: "",
      updateTime: "",
    };
  },
  props: {
    jcdInfoList: Array,
  },
  computed: {
    curDate() {
      return this.$store.state.curDate;
    },
  },
  methods: {
    addData() {
      let arr = [];
      let jcXpoint = "";
      let jcYpoint = "";
      if (this.jcdId != "") {
        if (
          this.jcdPoint != "" &&
          this.jcdPoint.indexOf("(") > -1 &&
          this.jcdPoint.indexOf(")") > -1
        ) {
          let start = this.jcdPoint.indexOf("(");
          let end = this.jcdPoint.indexOf(")");
          let item = this.jcdPoint.substring(start+1, end);
          arr = item.split(",");
          jcXpoint = arr[0];
          jcYpoint = arr[1];
        }
        let param = {};

        param.kqId = this.kqId;
        param.jzId = this.jzId;
        param.jcdId = this.jcdId;
        param.jcdXpoint = jcXpoint;
        param.jcdYpoint = jcYpoint;
        param.jcdName = this.jcdName;
        param.updateValue = this.updateValue;
        param.updateTime = this.curDate;

        this.$axios({
          url: "/addOneJcdInfo",
          type: "post",
          params: param,
        }).then((res) => {
          alert("添加成功");
          this.kqId = "";
          this.jzId = "";
          this.jcdId = "";
          this.jcdPoint = "";
          this.jcdName = "";
          this.updateValue = "";
          this.id++;
        }).catch((error)=>{});
      } else {
        alert("检测点编号不能为空");
      }
    },
    updateJcdId() {
      let it = this;
      if (this.jzId != "" && this.kqId != "") {
        if (this.id == 0) {
          let temp = this.jcdInfoList.filter((item) => {
            return item.jzId == it.jzId;
          });
          if (temp.length > 0) {
            this.id = temp.length + 1;
          }else{
            this.id = 1
          }
        }
        let ids = this.id;
        if (ids < 10) {
          ids = "0" + ids;
        }
        this.jcdId = this.jzId + ids;
      }
    },
  },
};
</script>
<style scoped>
.test-style {
  color: black;
  font-size: 18px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  width: calc(15.6% - 20px);
  margin-left: 10px;
  margin-right: 10px;
}
.add-data-title {
  height: 92px;
  background-color: rgba(204, 0, 0, 0.12);
  color: black;
  font-size: 36px;
  text-align: center;
  font-family: Roboto;
}
.add-data-unit-title {
  width: 30%;
  color: black;
  font-size: 20px;
  text-align: center;
  font-family: Roboto;
}
.add-data-unit-value {
  width: 70%;
  height: 34px;
}
.add-data-button {
  width: 170px;
  height: 47px;
  border-radius: 4px;
  background-color:#f1f1f1;
  color: black;
  font-size: 20px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 1);
}
</style>